<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>售后服务数据分析</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <link rel="stylesheet" type="text/css" href="view/iwocar5/css/main.css" />
	<style>
	.graph-title.spec2 span:nth-child(1)::after {background: #C00;}	
	.graph-title.spec2 span:nth-child(2)::after {background: #000;}	
	.graph-title.spec2 span:nth-child(3)::after {background: #222;}	
	.graph-title.spec2 span:nth-child(4)::after {background: #444;}	
	.graph-title.spec2 span:nth-child(5)::after {background: #555;}	
	.graph-title.spec2 span:nth-child(6)::after {background: #777;}	
	.graph-title.spec2 span:nth-child(7)::after {background: #999;}	
	.graph-title.spec2 span:nth-child(8)::after {background: #BBB;}	
	.graph-title.spec2 span:nth-child(9)::after {background: #CCC;}	
	.graph-title.spec2 span:nth-child(10)::after {background: #DDD;}
	.graph-title.spec2 span:nth-child(11)::after {background: #EEE;}	
	.graph-title.spec2 span:nth-child(12)::after {background: #FFF;}		
	
	
	</style>
	<script src="view/iwocar5/js/jquery-1.11.1.min.js"></script>
	<script>

	</script>
</head>
<body>
<!--    <div class="header">
        <h5>服务总监<i class="arrow_l1"></i><em class="arrow_l2"></em></h5>
    </div>-->
    <div class="form-bar">
        <h3 class="pub-title">
            <span>进店量</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id="jikebi">
                  <option selected = "selected">今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>
            </div>
        </h3>
        <div class="form-border">
            <h3 class="form-title bar-title">
                <p>历史数据环比   </p>
            </h3>   
            <div class="history-from" id="history-from"></div>
        </div>
    </div> 
    <div class="form-pie">
        <h3 class="pub-title">
            <span>进店频次分析</span>
        </h3>
        <div class="form-border">
            <h3 class="form-title">
                <p>进店周期</p>
            </h3>
            <div class="volume-from" id="volume1-from"></div>
            <h5 class="graph-title">
                <span>一月内</span>
                <span>三月内</span>     
                <span>五月内</span>              
            </h5>
        </div>
        <div class="form-border">
            <h3 class="form-title">
                <p>车型分布</p>
            </h3>
            <div class="volume-from" id="volume2-from"></div>
            <h5 class="graph-title spec2">
<span>A1</span><span>A3</span><span>A4</span><span>A5</span><span>A6</span><span>A7</span><span>A8</span>             
            </h5>
        </div>
    </div>
    <div class="form-pie" style="display:none">
        <h3 class="pub-title">
            <span>用户满意度</span>
            <a id="YIY">摇一摇问题设置</a>
        </h3>
        <div class="form-border">
            <h3 class="form-title">
                <p>摇一摇参与度</p>
            </h3>
            <div class="volume-from" id="volume3-from"></div>
            <h5 class="graph-title">
                <span>非常喜欢</span>
                <span>喜欢</span>     
                <span>不喜欢</span>              
            </h5>
        </div>
    </div>
    <div class="form-pie">
        <h3 class="pub-title">
            <span>等候行为分析</span>
        </h3>
        <div class="form-border" style="display:none">
            <h3 class="form-title">
                <p>在店等待率</p>
            </h3>
            <div class="volume-from" id="volume4-from"></div>
            <h5 class="graph-title">
                <span>是</span>
                <span>否</span>               
            </h5>
        </div>
        <div class="form-border">
            <h3 class="form-title">
                <p>WIFI登录率</p>
            </h3>
            <div class="volume-from" id="volume5-from"></div>
            <h5 class="graph-title">
                <span>是</span>
                <span>否</span>               
            </h5>
        </div>
        <!--<div class="form-border">
            <h3 class="form-title">
                <p>浏览喜好度</p>
            </h3>
            <div class="volume-from" id="volume6-from"></div>
            <h5 class="graph-title">
                <span>视频</span>
                <span>新闻</span>   
                <span>汽车</span>  
                <span>其他</span>              
            </h5>
        </div>-->
        <div class="form-border" style="display:none">
            <h3 class="form-title">
                <p>平均等候时长</p>
            </h3>
            <div class="volume-from" id="volume7-from"></div>
            <h5 class="graph-title">
                <span>1小时</span>
                <span>2小时</span>   
                <span>3小时</span>
                <span>4小时以上</span>              
            </h5>
        </div>
    </div>


<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('history-from')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['今天','昨天'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $nowservice; ?>,<?php echo $yesdservice; ?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
         $("#jikebi").change(function(){
						var flow_time=$("#jikebi").children('option:selected').val();
						if(flow_time=="今天"){
                                option.xAxis[0].data = ['今天','昨天'];
                                option.series[0].data = [<?php echo $nowservice?>,<?php echo $yesdservice?>];
                                //console.log(sx);
                                option.series[0].barCategoryGap='80%';
                                myChart.clear();
                                myChart.hideLoading();
                                myChart.setOption(option);
                            }
						if(flow_time=="本周"){
							option.xAxis[0].data = ['一','二','三','四','五','六','日'];
                                option.series[0].data = [
                                
                                <?php echo $onejk?>,
                                <?php echo $twojk?>,
                                <?php echo $threejk?>,
                                <?php echo $fourjk?>,
                                <?php echo $fivejk?>,
                                <?php echo $sixjk?>,
                                <?php echo $sevenjk?>,
                                ];
								option.series[0].barCategoryGap='50%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
						}
						if(flow_time=="本月"){
							option.xAxis[0].data = ['第1周','第2周','第3周','第4周',];
                                option.series[0].data = [
                                <?php echo $firstjk?>,
                                <?php echo $secondjk?>,
                                <?php echo $thirdjk?>,
                                <?php echo $fourthjk?>,];
								option.series[0].barCategoryGap='60%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
						}
						if(flow_time=="今年"){
							option.xAxis[0].data = ['第一季度','第二季度','第三季度','第四季度'];
                                option.series[0].data = [
                                <?php echo $firstmonth?>,
                                <?php echo $secondmonth?>,
                                <?php echo $thirdmonth?>,
                                <?php echo $fourthmonth?>,];
								option.series[0].barCategoryGap='60%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
						}


				})
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume1-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:'56', name:'56%'},
                                    {value:'32', name:'32%'},
                                    {value:'12', name:'12%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume2-from')); 
                
                var option = {
                        color :['#c00',"#000",'#222',"#444","#555","#777","#999","#BBB","#CCC","#DDD","#EEE","#FFF"],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:'5', name:'5%'},
                                    {value:'9', name:'9%'},
                                    {value:'54', name:'54%'},
                                    {value:'17', name:'17%'},
                                    {value:'5', name:'5%'},
                                    {value:'4', name:'4%'},
                                    {value:'6', name:'6%'},                              
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume3-from')); 
                
                var option = {
                        color : ['#434c53',"#c00000",'#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:25, name:'25%'},
                                    {value:50, name:'50%'},
                                    {value:25, name:'25%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume4-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:80, name:'80%'},
                                    {value:20, name:'20%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume5-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
								    {value:<?php echo $loginnum?>, name:'<?php echo $loginnum?>%'},
                                    {value:<?php echo $nologinnum?>, name:'<?php echo $nologinnum?>%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        /* require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume6-from')); 
                
                var option = {
                        color : ['#434c53',"#c00000",'#6d7578',"#b1b6b9"],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:25, name:'25%'},
                                    {value:53, name:'53%'},
                                    {value:15, name:'15%'},
                                    {value:7, name:'7%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        ); */

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume7-from')); 
                
                var option = {
                        color : ['#434c53',"#c00000",'#6d7578',"#b1b6b9"],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:25, name:'25%'},
                                    {value:53, name:'53%'},
                                    {value:15, name:'15%'},
                                    {value:7, name:'7%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
</script>
</body>
</html>